<template>
	<view class=" body window">
		<u-navbar :border-bottom='false' title="垫资单详情" :background="{}"></u-navbar>
		<view class="bodyC vh-100">
			<scroll-view scroll-y style="height: 90%;">
				<view class="contentZ border">
					<view class="listZ w-100 d-flex border-bottom  p-2" v-for="(item,index) in raw_data" :key='index'>
						<view class="name w-30 font-weight">
							{{item.text | raw_data_name}}
						</view>
						<view v-if="item.type=='button'">
							<u-button type="success" size="min">{{item.text | raw_data_content}}</u-button>
						</view>
						<view v-else class="flex-1">
							{{item.text | raw_data_content}}
						</view>
					</view>
				</view>
				<view class="contentC border mt-3 p-2">
					<view class="mb-3"><text>审批进度</text></view>
					<view class="tl-steps flex-column mb-5">
						<block v-for="(item,index) in approval_list" :key='index'>
							<view class="d-flex a-center">
								<view class="tl-dot tl-green"></view>
								<view class="d-flex flex-column a-center ml-5">
									<text>{{item.admin_name}}</text><text>{{item.zhiwei }}</text>
								</view>
								<view class=" ml-10">
									<u-tag v-if="status && index==approval_list.length-1" class="mr-5" :text="status==4?'同意':'驳回'"
										:type="status | sh_status" />
										<u-tag v-else class="mr-5" :text="item.status_text"
											:type="item.status | sh_status" />
									<text>{{item.check_time|| ''}}</text>
								</view>
							</view>
							<view v-if="index!=approval_list.length-1" class="tl-line tl-line-green"></view>
							
						</block>
					</view>
					
					<u-button class="mr-5" type="primary" size="medium" @click="status=4" :ripple="true" ripple-bg-color="#909399" :disabled="approval_status!==2">同意</u-button>
					<u-button type="error" size="medium" @click="status=3" :ripple="true" ripple-bg-color="#909399" :disabled="approval_status!==2">拒绝</u-button>
					
					<view class="mt-2 d-flex">
						<text class="mr-2">备注 : </text>
						<u-input class="flex-1" v-model="mobile" type="textarea" :border="true" />
						
					</view>
					<view class="w-100 d-flex  j-center mt-4 ">
						<u-button type="success" size="default" class="w-80" @click="submit">确定</u-button>
					</view>

				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status:"",
				approval_list: [],
				raw_data: [],
				mobile:"",
				msg_id:"",
			    approval_status:"",
			  
				}
			
		},
		onLoad(e) {
			this.msg_id=e.msg_id
			this.$minApi.checkApprovalGet({
				msg_id: e.msg_id
			}).then(res => {
				this.raw_data = res.data.raw_data
				this.approval_list=res.data.approval_list
				this.approval_status=res.data.approval_status
			})
		},
	
		methods: {
			eventTab(e) {
			
			},
			change(index) {
				this.current = index;
			},
			submit(){
				this.$minApi.checkApproval({msg_id:this.msg_id,status:this.status,remark:this.mobile}).then(
				()=>{
					uni.showToast({
						icon:"none",
					 title:'提交成功'
					})
					setTimeout(()=> {
						uni.navigateBack({
						    delta: 2
						});
					}, 1500);
				}

				)
			}
		}
	}
</script>

<style lang="less">
	.body {
		height: 100vh;
		margin: 0;
		overflow: hidden;
		// padding: 0 20rpx;
		font-family: "montserrat";
		background-image: linear-gradient(125deg, #CB9FFE, #5894F7, #ABCDFA, #74A3F6, #CB9FFE);
		background-size: 400%;
		animation: bganimation 15s infinite;
	}

	page,
	body {
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;

	}

	.grid-text {
		background-color: inherit;
		font-size: 28rpx;
		margin-top: 4rpx;
		// color: $u-type-info;
	}

	@keyframes bganimation {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0% 50%;
		}

	}

	.contentZ {
		width: 90%;

		margin: 20rpx auto;
		background-color: #FFFFFF;
	}

	.contentC {
		width: 98%;

		background-color: #FFFFFF;
		margin: 20rpx auto;
	}

	.tl-steps {
		display: flex;
		// justify-content: flex-start;
		align-items: flex-start;

		.tl-dot {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
		}

		.tl-line {
			// width: 1rpx;
			height: 30rpx;
			border: 1px solid #CCCCCC;
			margin-left: 12rpx;
		}

		// .tl-line-green {
		// 	width: 250rpx;
		// 	border: 1px solid #4DB046;
		// }

		.tl-green {
			background: #4DB046 !important;
		}

		.tl-gray {
			background: #DCDCDC;
			;
		}
	}
</style>
